import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import { Link, hashHistory } from 'react-router';
import { Input, Button, Form, Icon, message, Carousel } from 'antd'
import cookie from 'react-cookie'
import Ajax from 'lib/Ajax'

const pageName = 'login'
const FormItem = Form.Item;

@Form.create()
@inject('appStore', 'languageStore')
@observer
class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount(){

  }

  login = () => {
		const self = this;
		Ajax({
      url: '/user/auth',
      data: self.props.form.getFieldsValue(),
      success: function(result){
				cookie.save('token', result.token, { path: '/' });
				hashHistory.push('/');
				self.props.appStore.saveLoginDto(result.dto);
      },
      error: function(error){
        Toast.info(error||'请求失败');
      }
    });
  }

  render() {
		const { getFieldDecorator } = this.props.form;
		const pageData = this.props.languageStore.getPageData(pageName);
    return (
    	<div className={pageName}>
    		<div className="lunbotu">
	    		<Carousel autoplay>
				    <div><img src="/resources/admin/img/bg-img/bg-img-1.jpg" alt=""/></div>
				    <div><img src="/resources/admin/img/bg-img/bg-img-2.jpg" alt=""/></div>
				    <div><img src="/resources/admin/img/bg-img/bg-img-3.jpg" alt=""/></div>
				    <div><img src="/resources/admin/img/bg-img/bg-img-4.jpg" alt=""/></div>
				    <div><img src="/resources/admin/img/bg-img/bg-img-5.jpg" alt=""/></div>
				    <div><img src="/resources/admin/img/bg-img/bg-img-6.jpg" alt=""/></div>
				    <div><img src="/resources/admin/img/bg-img/bg-img-7.jpg" alt=""/></div>
				  </Carousel>
			  </div>
				<div className={`${pageName}-con`}>
					<Form onSubmit={this.login} className="login-form">
		        <FormItem>
		          {getFieldDecorator('account', {
		            rules: [{ required: true, message: '请输入用户名' }],
		          })(
		            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="用户名" />
		          )}
		        </FormItem>
		        <FormItem>
		          {getFieldDecorator('pwd', {
		            rules: [{ required: true, message: '请输入密码' }],
		          })(
		            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
		          )}
		        </FormItem>
		        <FormItem>
		          <Button type="primary" size="large" htmlType="submit" className="login-form-button">
		            登录
		          </Button>
		          <Link to="/register">注册</Link>
		        </FormItem>
		      </Form>
				</div>
    	</div>
    )
  }
}

module.exports = ModuleName
